<!--
 * @Author: 秦福凯
 * @LastEditTime: 2025-04-10 09:45:09
 * @Description: 重构tabs组件
-->
<!-- 多层级子菜单组件 -->
<template>
  <el-sub-menu :index="data.url" :key="data.id" class="u-common-sub-menu">
    <template #title>
      <!-- {{data.id}} -->
      <el-icon>
        <component :is="data.icon"></component>
      </el-icon>
      <span> {{ data.name }}</span>
    </template>
    <template v-for="(item,index) in data.childrenList" :key="item.id">
      <!-- 如果有子集 -->
      <template v-if="item.childrenList">
        <SubMenu :data="item"></SubMenu>
      </template>
      <!-- 如果没有子集 -->
      <template v-else>
        <el-menu-item :index="item.url"  :key="item.id">
          <el-icon>
						<component :is="item.icon"></component>
					</el-icon>
          {{ item.name }}
        </el-menu-item>
      </template>
    </template>
  </el-sub-menu>
</template>

<script>
 export default {
  name:'SubMenu'
}
</script>

<script setup>
  import SubMenu from './submenu.vue'

  defineProps({
    data:{
      type:Object 
    }
  })
</script>

<style scoped lang="scss">

/* .u-common-sub-menu{
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  .el-sub-menu__title:hover{
    background-color: #006438 !important;
    color: #FFFFFF !important;
  }
} */
</style>


